<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>加油审核</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="加油卡">
              <a-select
                class="selectInputWidth"
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="searchForm.cardId"
                @search="handleOilCardChange"
              >
                <a-select-option key>全部</a-select-option>
                <a-select-option v-for="d in oilCardLikeData" :key="d.cardId">{{ d.cardNo }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="司机">
              <a-input v-model="searchForm.driverName" />
            </a-form-item>
            <a-form-item label="车辆">
              <a-input v-model="searchForm.truckNumber" />
            </a-form-item>
            <a-form-item label="加油日期">
              <a-range-picker @change="onChangeTime">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="exportExcel">导出excel</a-button>
            </a-form-item>
          </a-form>

          <a-tabs @change="tabChange" :tab-bar-style="{margin:'20px 0 0 0',padding:'0'}">
            <a-tab-pane :key="1" tab="油库加油" style="padding:0"></a-tab-pane>
            <a-tab-pane :key="2" tab="加油卡加油" style="padding:0"></a-tab-pane>
          </a-tabs>
          <a-table
            :columns="columns"
            :data-source="tableData"
            :pagination="pagination"
            :loading="loading"
            rowKey="applyId"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
              <a @click="auditIt(record)">审核</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <oilAudit :record="record" :visible="oilAuditVisible" @setVisible="setVisible" />
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import oilAudit from './oilAudit'

import { commonExport } from '@/api/request'
import { queryTruckOilCardDown } from '@/api'
import { queryTruckOilInApplyList } from '@/api/landCenter'

let queryColumn = null

export default {
  data () {
    this.handleOilCardChange = debounce(this.handleOilCardChange, 800)

    // 油库
    const column1 = [
      {
        title: '序号',
        dataIndex: '',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      },
      {
        title: '加油量(L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '结余油量（L）',
        dataIndex: 'remainingOil'
      },
      {
        title: '当前里程数（km）',
        dataIndex: 'mileage'
      },
      {
        title: '车辆',
        dataIndex: 'truckNumber'
      },
      {
        title: '司机',
        dataIndex: 'driverName'
      },
      {
        title: '加油日期',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        width: 90,
        scopedSlots: { customRender: 'operation' }
      }
    ]
    // 加油卡
    const column2 = [
      {
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      },
      {
        title: '加油卡',
        width: 120,
        dataIndex: 'cardNo'
      },
      {
        title: '加油量(L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '单价（元/L）',
        dataIndex: 'price'
      },
      {
        title: '交易金额（元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '余额（元）',
        dataIndex: 'accountAmount'
      },
      {
        title: '当前里程数（km）',
        dataIndex: 'mileage'
      },
      {
        title: '车辆',
        dataIndex: 'truckNumber'
      },
      {
        title: '司机',
        width: 90,
        dataIndex: 'driverName'
      },
      {
        title: '加油日期',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        width: 90,
        scopedSlots: { customRender: 'operation' }
      }
    ]

    queryColumn = [column1, column2]

    return {
      oilCardLikeData: [],
      searchForm: {
        applyType: 1, // 1油库加油，2加油卡加油
        cardId: null, // 加油卡
        driverName: '', // 司机
        truckNumber: '', // 车辆
        time1: null, // 日期
        time2: null // 日期
      },
      columns: queryColumn[0],
      loading: false,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // 审核
      record: null,
      oilAuditVisible: false
    }
  },
  components: {
    oilAudit
  },
  methods: {
    handleOilCardChange (nameLike) { // 加油卡
      if (nameLike) {
        queryTruckOilCardDown({
          word: nameLike
        }).then(rsp => {
          this.oilCardLikeData = rsp.data
        })
      } else {
        this.oilCardLikeData = []
      }
    },
    onChangeTime (data, dateString) {
      this.searchForm.time1 = dateString[0]
      this.searchForm.time2 = dateString[1]
    },
    tabChange (i) {
      this.searchForm.applyType = i
      this.columns = queryColumn[i - 1]
      this.handleSubmit1()
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryTruckOilInApplyList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    exportExcel () {
      commonExport('/truckStock/exportTruckOilInApplyList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: queryColumn[this.searchForm.applyType - 1]
      })
    },
    auditIt (record) {
      if (!this.$root._bc.audit) {
        this.$message.error('您无此权限！')
        return
      }
      this.record = record
      this.oilAuditVisible = true
    },
    setVisible (save) {
      this.record = null
      this.oilAuditVisible = false
      if (save) this.handleSubmit()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
